<template>
    <div class="section-wrap" id="illegalDetails">
        <div class="headerBox">
            <div class="header">
                <x-icon type="ios-arrow-left" size="" class="icon-white" @click="$router.go(-1)"></x-icon>
                违章整改
            </div>
        </div>
        <div class="form-section" style="margin-top: 60px;">
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>项目名称</label>
                </div>
                <div>{{info.departName}}</div>
                <!-- <div class="input_div">
                    <input type="text"
                           v-model="info.departName"
                           :disabled="isDisabled">
                </div> -->
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>项目管理单位</label>
                </div>
                <div>{{info.panrentDepartName}}</div>
                <!-- <div class="input_div">
                    <input type="text"
                           v-model="info.panrentDepartName"
                           :disabled="isDisabled">
                </div> -->
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>业主项目经理</label>
                </div>
<div>{{info.charge}}</div>
                <!-- <div class="input_div">
                    <input type="text"
                           v-model="info.charge"
                           :disabled="isDisabled">
                </div> -->
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章登记人</label>
                </div>
<div>{{info.weizRegisterPerson}}</div>
                <!-- <div class="input_div">
                    <input type="text"
                           v-model="info.weizRegisterPerson"
                           :disabled="isDisabled">
                </div> -->
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章时间</label>
                </div>
<div>{{info.weizDate}}</div>
                <!-- <div class="input_div">
                    <input type="text"
                            v-model="info.weizDate"
                           :disabled="isDisabled">
                </div> -->
            </div>
            <div class="form-item form-item-style1" style="border-bottom: none;height: auto;padding: 0px 10px 10px 30px;">
                <div class="label-title"  style="line-height: normal;">
                    <label>违章人员名称</label>
                </div>
                    <div class="input_div" style="width: 260px;line-height: normal;text-align:right">
                    {{info.weizPersonName}}
                    </div>
            </div>
            <div class="form-item form-item-style1" style="border-bottom: none;height: auto;padding: 0px 10px 10px 30px;">
                <div class="label-title"  style="line-height: normal;">
                    <label>违章地点</label>
                </div>
                    <div class="input_div" style="width: 260px;line-height: normal;text-align:right">
                    {{info.weizAddress}}
                    </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章人员所属参建单位</label>
                </div>
<div>{{info.weizPersonDepartName}}</div>
                <!-- <div class="input_div">
                    <input type="text"
                           v-model="info.weizPersonDepartName"
                           :disabled="isDisabled">
                </div> -->
            </div>
            <div class="form-item form-item-style1" style="height: 140px;flex-wrap: wrap;height: auto;padding: 0px 10px 10px 30px;">
                <div class="left_label" style="display: block;line-height: normal;">
                    <label>违章图片</label>
                </div>
                <div style="float:left;display: flex;flex-wrap: wrap;">
                    <img  v-for='item3 in list' :key="item3.id" :src="item3.src" alt="" @click="previewImg(item3.src)" style="width:80px;height:80px;margin-right:10px;">
                </div>
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章迹象</label>
                </div>
<div>{{info.weizPhenItemListName}}</div>
                <!-- <div class="input_div">
                    <input type="text"
                           v-model="info.weizPhenItemListName"
                           :disabled="isDisabled">
                </div> -->
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章编号</label>
                </div>
<div>{{info.weizNo}}</div>
                <!-- <div class="input_div">
                    <input type="text"
                           v-model="info.weizNo"
                           :disabled="isDisabled">
                </div> -->
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章标准编号</label>
                </div>
<div>{{info.weizPhenItemListNo}}</div>
                <!-- <div class="input_div">
                    <input type="text"
                           v-model="info.weizPhenItemListNo"
                           :disabled="isDisabled">
                </div> -->
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章整改期限</label>
                </div>
<div>{{info.weizAbarbeitungEndDate}}</div>
                <!-- <div class="input_div">
                    <input type="text"
                           v-model="info.weizAbarbeitungEndDate"
                           :disabled="isDisabled">
                </div> -->
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章验收单位</label>
                </div>
<div>{{info.weizCheckDepartName}}</div>
                <!-- <div class="input_div">
                    <input type="text"
                           v-model="info.weizCheckDepartName"
                           :disabled="isDisabled">
                </div> -->
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章验收人员</label>
                </div>
<div>{{info.weizCheckPersonName}}</div>
                <!-- <div class="input_div">
                    <input type="text"
                           v-model="info.weizCheckPersonName"
                           :disabled="isDisabled">
                </div> -->
            </div>
            <div class="form-item form-item-style1">
                <div class="label-title">
                    <label>违章现象抄送人</label>
                </div>
<div>{{info.checkNo}}</div>
                <!-- <div class="input_div">
                    <input type="text"
                           v-model="info.checkNo"
                           :disabled="isDisabled">
                </div> -->
            </div>
            <div v-for="(item,index) in info.rectifyList" :key="index">
                <div v-if='item.rectifystatus==1'>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label style="color:#1545d2;font-weight: bold;">违章整改信息第{{index+1}}次</label>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>违章整改责任人</label>
                        </div>
<div>{{info.weizCheckZrrName}}</div>
                        <!-- <div class="input_div">
                            <input type="text"
                                v-model="info.weizCheckZrrName"
                                :disabled="isDisabled">
                        </div> -->
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>整改完成时间</label>
                        </div>
<div>{{item.rectifydate}}</div>
                        <!-- <div class="input_div">
                            <input type="text"
                                v-model="item.rectifydate"
                                :disabled="isDisabled">
                        </div> -->
                    </div>
                    <div class="form-item form-item-style1" style="height: 140px;flex-wrap: wrap;height: auto;padding: 10px 10px 10px 30px;">
                        <div class="left_label" style="display: block;line-height: normal;">
                            <label>整改后图片</label>
                        </div>
                        <div style="float:left;display: flex;flex-wrap: wrap;">
                            <img  v-for='item3 in item.rectifyImgList' :key="item3.id" :src="item3.url" alt="" @click="previewImg(item3.url)" style="width:80px;height:80px;margin-right:10px;">
                        </div>
                    </div>
                    </div>
                    <div class="form-item form-item-style1" style="border-bottom: none;height: auto;padding: 10px 10px 10px 25px;">
                        <div class="label-title"  style="line-height: normal;">
                            <label>整改情况回复</label>
                        </div>
                          <div class="input_div" style="width: 260px;line-height: normal;text-align:right">
                          {{item.rectifydateRemark}}
                          </div>
                    </div>
                 <div v-if='item.checkstatus==1'>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label style="color:#1545d2;font-weight: bold;">违章验收信息第({{index+1}})次</label>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>违章验收人员</label>
                        </div>
                        <div class="input_div">
                            <input type="text" v-model="info.weizCheckPersonName" disabled placeholder="请选择">
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>验收时间</label>
                        </div>
                        <div class="input_div">
                            <input type="text" v-model="item.checkdate" disabled>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>违章验收结论</label>
                        </div>
                        <div class="input_div">
                            <input type="text" v-model="item.checkResults" disabled>
                        </div>
                    </div>
                    <div class="form-item form-item-style1">
                        <div class="label-title">
                            <label>违章验收方式</label>
                        </div>
                        <div class="input_div">
                            <input type="text" v-model="item.checkMode" disabled>
                        </div>
                    </div>
                    <div class="form-item form-item-style1" style="height: 140px;flex-wrap: wrap;height: auto;padding: 10px 10px 10px 30px;">
                        <div class="left_label" style="display: block;line-height: normal;">
                            <label>验收图片</label>
                        </div>
                        <div style="float:left;display: flex;flex-wrap: wrap;">
                            <img  v-for='item3 in item.checkImgList' :key="item3.id" :src="item3.url" alt="" @click="previewImg(item3.url)" style="width:80px;height:80px;margin-right:10px;">
                        </div>
                    </div>
                    <div class="form-item form-item-style1" style="border-bottom: none;height: auto;padding: 10px 10px 10px 25px;">
                        <div class="label-title"  style="line-height: normal;">
                            <label>违章验收意见</label>
                        </div>
                          <div class="input_div" style="width: 260px;line-height: normal;text-align:right">
                          {{item.checkIdea}}
                          </div>
                    </div>
                </div>

            </div>
            <div v-transfer-dom>
                <previewer :list="list" ref="previewer"  @on-index-change="logIndexChange"></previewer>
            </div>
            <el-dialog :visible.sync="flag"  fullscreen center>
            <img :src="selectImg" alt="" width="100%">
            </el-dialog>
        </div>
    </div>
</template>
<script>
import formatDate from "../../utils/formatDate";
import LoadMore from "vux/src/components/load-more/index";
import {TransferDom,} from 'vux'
export default {
  data() {
    return {
        selectImg:'',
        flag: false,
        isDisabled: true, // 是否禁止输入
        iin:false,
        iino:true,
        params: {
            id:'',
        },
        info: {},
        list:[],
        options: {
        getThumbBoundsFn (index) {
            let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
            let rect = thumbnail.getBoundingClientRect()
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
        }
      },
    };
  },
  directives: {
    TransferDom
  },
  components: { },
  created() {
      this.info.approvalDate=this.getdatanew();
      this.getInfo();
  },
  methods: {
    previewImg(url){//图片预览
    this.selectImg=url
    this.flag=true
    },
    logIndexChange (arg) {
      console.log(arg,1)
    },
    show (index) {
      this.$refs.previewer.show(index)
    },
    getInfo() {
       this.params.id=this.$route.query.id; //id
       this.$axiosAjax.illegalGet(this.params).then(res => {
          if (res.data.success == true) {
             this.info = res.data.result;
            var arrImg =[]
            for(var k of res.data.result.projectImgList){
                var obj =[]
                obj.src =k.url
                obj.w=1200
                obj.h=900
                arrImg.push(obj)
            }
            this.list=arrImg
          }
        })
        .catch(err => {});
    },
    goBack() {
      this.$router.go(-1);
    },
    getCheck()
    {this.iin=true;
     this.iino=false;
     },
    getCheckno()
    {
     this.iin=false;
     this.iino=true;
    },
    getdatanew(){
        var date=new Date();
        var seperator1='-';
        var year=date.getFullYear();
        var month=date.getMonth()+1;
        var strDate=date.getDate();
        if(month>= 1 && month<=9)
        {
            month ="0" +month;
        }
        if(strDate>= 0 && strDate<=9)
        {
            strDate ="0" +strDate;
        }
        var currentdate=year+seperator1+month+seperator1+strDate;
    }
  },

};
</script>
<style lang="less" scoped>
#illegalDetails{
    position: relative;
    .form-item-style1{
        height: 40px;
        line-height: 40px;
    }
    .label-title{
        width: 160px;
    }
    .form-item {
        margin-left: 0;
        padding-left: 20px;
        label {
            font-weight: normal;
            width: 160px;
        }
    .input_div {
        input{
            color: #999;
        }
        input:disabled {
            // -webkit-opacity: 1;
            // opacity: 1;
            color: #000;
        }
        > span.radio_span {
        font-size: 14px;
        color: #666;
        background-image: url("/static/images/radio_not.png");
        background-position: left center;
        background-repeat: no-repeat;
        background-size: 17px 17px;
        padding: 2px 0 2px 20px;
        margin-left: 30px;
        }
        > span:first-child {
        margin-left: 0;
        }
        .vux-x-icon {
        fill: #999;
        float: right;
        margin-top: 17px;
        }
    }


    }
    .form-item .vux-cell-value{
        height: 40px;
        line-height: 40px;
        margin-top: 8px;
    }
    .imgDiv{
        border-bottom: 1px solid rgb(239, 239, 244);
        padding: 0 20px;
        .left_label{
            height: 40px;
            font-size: 14px;
            line-height: 40px;
        }
        img{
            width: 50px;
            height: 50px;
            margin: 5px 5px 0 0;
        }
        .imgUl{
            width: 100%;
            margin-bottom: 6px;
            img{
                width: 50px;
                height: 50px;
                margin: 5px 5px 0 0;
            }
        }
    }
    .btns_div {
    background: #ebeef2;
    padding: 30px 20px 55px;
    justify-content: space-between;
    display: flex;
    a {
        height: 40px;
        border-radius: 20px;
        display: inline-block;
        width: 140px;
        text-align: center;
        line-height: 40px;
        color: #fff;
    }
    .submitBtn {
        background: #469b7a;
    }
    .cancelBtn {
        background: #ffb400;
    }
    
    }
}

</style>
